<template>
  <div class="home">
    <Header></Header>
    <div class="banner-wrap">
      <div class="banner">
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>
            <img src="~@/assets/img/img_13_75.jpg" alt />
            <div class="content banner1_fl">
              <h1>政企直播解决方案</h1>
              <p>政务直播、企业直播一站式解决方案</p>
              <p>会议直播、活动直播、企业内训、新零售直播</p>
              <button @click="$router.push({ name: 'login' })">免费试用七天</button>
            </div>
          </swiper-slide>
          <swiper-slide>
            <img src="~@/assets/img/img_13_74.jpg" alt />
            <div class="content banner1_fl">
              <h1>教培直播解决方案</h1>
              <p>无需技术研发团队，轻松拥有在线教育平台</p>
              <p>知识付费、在线教育、金融直播、营销拓客</p>
              <button @click="$router.push({ name: 'login' })">免费试用七天</button>
            </div>
          </swiper-slide>
          
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <div class="section-list">
      <div class="section style2 stylestyl">
        <div class="section-inner" >
          <div class="tit-container scrollRevealTop0">
            <div class="tit">改变-让未来更多可能</div>
          </div>
          <div class="section-body scrollRevealTop0" style="padding-bottom：0">
            <swiper class="swiper" :options="swiperOption2" style="margin-bottom：0">
              <swiper-slide style="width:75%; ">
                <img src="~@/assets/img/img_13_76.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text">多应用场景覆盖</div>
                  <div class="swiper_div_txt">教育培训、政企直播、金融直播、<br>
                  知识付费、新零售</div>
                </div>
              </swiper-slide>
              <swiper-slide style="width:75%;">
                <img src="~@/assets/img/img_13_728.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text">大量营销拓客工具</div>
                  <div class="swiper_div_txt">分销返利、裂变海报、多人拼团、<br>
                  限时折扣，抽奖等</div>
                </div>
              </swiper-slide>
              <swiper-slide style="width:75%;">
                <img src="~@/assets/img/img_13_255.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text">多种直播互动玩法</div>
                  <div class="swiper_div_txt">弹幕、打赏、抽奖、转盘、互动游戏、<br>
                  图文、投票、万能表单</div>
                </div>
              </swiper-slide>
              <swiper-slide style="width:75%;">
                <img src="~@/assets/img/img_13_254.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text">多维度数据精准分析</div>
                  <div class="swiper_div_txt">多维度用户画像、精细化的数据统计<br>
                  CRM客户管理</div>
                </div>
              </swiper-slide>
            </swiper>
            
          </div>
        </div>
      </div>
      <div class="section style1">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">教培直播解决方案</div>
            <div class="tits">无需技术研发团队，轻松拥有在线教育平台</div>
          </div>
          <div class="section_listsr">
            <div :class="sectionlist==1?'tope_list_Move':''" @click="listone(1)">在线教育</div>
            <div :class="sectionlist==2?'tope_list_Move':''" @click="listone(2)">助学应用工具</div>
            <div :class="sectionlist==3?'tope_list_Move':''" @click="listone(3)">知识付费</div>
            <div :class="sectionlist==4?'tope_list_Move':''" @click="listone(4)">营销拓客</div>
          </div>
          <div class="section-body scrollRevealTop0" v-if="sectionlist==1">
            <img src="~@/assets/img/1.png" alt />
            <p>
              支持公开课、大班互动课、<br>
              小班课，等多种应用场景
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
          <div class="section-body scrollRevealTop0" v-if="sectionlist==2">
            <img src="~@/assets/img/2.png" alt />
            <p>
              提供打卡、训练营、题库、<br>
              作业助手、学员圈等多种应用
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
          <div class="section-body scrollRevealTop0" v-if="sectionlist==3">
            <img src="~@/assets/img/3.png" alt />
            <p>
              一分钟打造知识店铺，全网<br>自助营销，让轻松知识变现
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
          <div class="section-body scrollRevealTop0" v-if="sectionlist==4">
            <img src="~@/assets/img/4.png" alt />
            <p>
              数十种营销插件<br>招生引流一步到位
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
        </div>
      </div>
      <div class="section style1">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">政企直播解决方案</div>
            <div class="tits">政务直播、企业直播一站式解决方案</div>
          </div>
          <div class="nav_top">
          <div class="section_list">
            <div :class="sectionlistse==1?'tope_list_Move':''" @click="listtwo(1)">会议/活动</div>
            <div :class="sectionlistse==2?'tope_list_Move':''" @click="listtwo(2)">企业内训</div>
            <div :class="sectionlistse==3?'tope_list_Move':''" @click="listtwo(3)">新零售</div>
            <div :class="sectionlistse==4?'tope_list_Move':''" @click="listtwo(4)">企业营销</div>
            <div :class="sectionlistse==5?'tope_list_Move':''" @click="listtwo(5)">分销市场</div>
            <div style="padding-right: 10px;"></div>
          </div>
          </div>
             <div class="section-body scrollRevealTop0" v-if="sectionlistse==1">
            <img src="~@/assets/img/5.png" alt />
            <p>
              产品发布会，大型峰会论坛<br>
              企业年会一站式解决方案
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
          <div class="section-body scrollRevealTop0" v-if="sectionlistse==2">
            <img src="~@/assets/img/6.png" alt />
            <p>
              在线培训系统，移动学习<br>企业知识库，助力企业提升人才价值
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
          <div class="section-body scrollRevealTop0" v-if="sectionlistse==3">
            <img src="~@/assets/img/7.png" alt />
            <p>
              轻松搭建直播间，一键直播分享<br>轻松获客，商城完美融合，助力客户收益最大化
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
          <div class="section-body scrollRevealTop0" v-if="sectionlistse==4">
            <img src="~@/assets/img/8.png" alt />
            <p>
             海量营销工具，轻松打造<br>爆款，私域流量高效变现
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
          <div class="section-body scrollRevealTop0" v-if="sectionlistse==5">
            <img src="~@/assets/img/9.png" alt />
            <p>
             多样的网格分销渠道，择品，<br>物流，售后一站式解决方案
            </p>
            <div class="div_buttom">
               <!-- <button >
                <a :href="paas_url + '/web.php#/register'" target="_blank"
                  >立即免费试用</a
                >
              </button> -->
              <button class="" @click="$router.push({ name: 'login' })">了解更多</button>
            </div>
          </div>
        </div>
      </div>
      <div class="section section2">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">全方位互动营销场景的直播平台</div>
            <div class="tits">多层视频编码技术、多场景导播、预播、尾导<br>
等云端自动流控，让直播更加流畅清晰</div>
          </div>
          <div class="inner_list">
            <div class="inner_list_div">
              <div class="inner_list_img"><img src="~@/assets/img/img_13_85.jpg" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">公开课</div>
                  <div>跨平台营销，<br>解决您的经营难题</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_86.jpg" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">精品小班课</div>
                  <div>一对一、一对多精品小班课，上讲台视频互动</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_87.jpg" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">大班互动课</div>
                  <div>多人同屏连麦，万人在线互动</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_88.jpg" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">会议直播</div>
                  <div>高清流畅远程会议体验，极大提升会议效率</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_89.png" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">活动直播</div>
                  <div>媒体宣发一体化，多平台聚合推流，万人在线，实时互动</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_90.png" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">聚合直播</div>
                  <div>40+主流平台并机直播，最大量直播曝光</div>
                </div>
            </div>
          </div>
         
          <div class="inner_list" v-if="!drop">
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_91.png" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">多终端一键开播</div>
                  <div>APP、小程序、网页、电脑端一键发起直播</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_92.png" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">多种直播互动方式</div>
                  <div>视频、语音、图文等多种内容方式，满足各直播营销场景</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_93.png" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">防盗录 版权保护</div>
                  <div>用户验证、防录播跑马灯、评论审核等，多维度保障直播内容安全</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_94.png" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">20+营销工具</div>
                  <div>智能表单，邀请榜、分销、抽奖、红包、拼团等，满足营销获客变现</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_95.png" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">短视频获客</div>
                  <div>直播+短视频，私域获客新模式</div>
                </div>
            </div>
            <div class="inner_list_div">
              <div  class="inner_list_img"><img src="~@/assets/img/img_13_96.png" alt="" srcset=""></div>
              <div class="section-body-div">
                  <div class="section-body-text">精准数据分析</div>
                  <div>多维度用户画像、精细化直播观看统计、随时掌控直播效果</div>
                </div>
            </div>
        </div>
         <div style="text-align: center;" @click="down()">
           <img style="width:20px" v-if="drop" src="~@/assets/img/img_13_721.png" alt="" srcset="">
           <img style="width:20px" v-if="!drop" src="~@/assets/img/img_13_722.png" alt="" srcset="">
           </div>
        </div>
      </div>
      <div class="section section2">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">五大产品亮点</div>
          </div>
          <div class="innerlist">
            <div class="innerlist_one">
              <div>
                <img src="~@/assets/img/img_13_98.png" alt="" srcset="">
                <div class="innerlist_neso">跨平台多终端</div>
                <div class="innerlist_text">一键生成多终端，<br>支持多终端裂变推广变现</div>
              </div>
              <div>
                <img src="~@/assets/img/img_13_99.png" alt="" srcset="">
                <div class="innerlist_neso">打造私域流量</div>
                <div class="innerlist_text">助力企业打造私域流量<br>降低获客成本，直接触达客户</div>
              </div>
            </div>
            <div class="innerlist_text_set">
                <img src="~@/assets/img/img_13_100.png" alt="" srcset="">
                <div class="innerlist_neso">垂直行业生态闭环</div>
               
                <div class="innerlist_text"> 量身打造行业性专属系统，全流程<br>服务，资源效应推广最大化</div>
            </div>
            <div  class="innerlist_one">
              <div>
                <img src="~@/assets/img/img_13_256.png" alt="" srcset="">
                <div class="innerlist_neso">快速部署 SaaS</div>
                <div class="innerlist_text">丰富的个性化设置，无需技术<br>团队，轻松拥有在线直播平台</div>
              </div>
              <div>
                <img src="~@/assets/img/img_13_257.png" alt="" srcset="">
                <div  class="innerlist_neso">定制化开放 PaaS</div>
                <div class="innerlist_text">定制化解决方案，全业务流程<br>模块，私有化部署</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section section2">
        <div class="section-inner">
          <div class="innerlistsr">
               <img  class="scrollRevealBounceIn_img" src="~@/assets/img/img_13_129.png" alt="" srcset="">
            <div class="scrollResda">
              <div class="section-body scrollRevealTop0 Toponetsds" style="padding-top: 0">
                <div class="Toponetsds_text">聚合直播</div>
                <div class="Toponetsds_texton">40+主流平台并机直播，最大量直播曝光</div>
                <div class="Toponetsds_img">
                  <img class="Toponetsds_img_one" src="~@/assets/img/img_13_130.png" alt="" srcset="">
                  <img class="Toponetsds_img_ones" src="~@/assets/img/img_13_131.png" alt="" srcset="">
                  <img class="Toponetsds_img_onen" src="~@/assets/img/img_13_132.png" alt="" srcset="">
                </div>
                <div>
                  <img class="Toponetsds_img_oneo" src="~@/assets/img/img_13_133.png" alt="" srcset="">
                </div>
                <div class="morderder">
                  <div class=""  @click="$router.push({ name: 'login' })">了解更多</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
       <div class="section style2">
        
      </div>
      <div class="section style2 stylestyr">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">技术优势</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <swiper class="swiper swiperont" :options="swiperOption3">
              <swiper-slide class="swiperslide" style="width:70%; ">
                <img src="~@/assets/img/img_13_122.png" alt />
                <div class="swiperslide_text">高稳定</div>
                <div class="swiperslide_text_one">融合CDN，适应中国全网络<br>
                    轻松支持百万级别同时在线<br>
                    网络加速黑科技，支持30%+丢包率稳定直播</div>
              </swiper-slide>
              <swiper-slide class="swiperslide" style="width:70%;">
                <img src="~@/assets/img/img_13_123.png" alt />
                <div class="swiperslide_text">低延迟</div>
                <div class="swiperslide_text_one">小班课基于UDP协议，延迟小于200毫秒<br>
                    大班课PC端/移动原生，延迟业内极低1S</div>
              </swiper-slide>
              <swiper-slide class="swiperslide" style="width:70%;">
                <img src="~@/assets/img/img_13_124.png" alt />
                <div class="swiperslide_text">多线路传输</div>
                <div class="swiperslide_text_one">网络节点自动优选<br>
                     多线路多运营商手动切换<br>
                     全球1000+cdn节点覆盖</div>
              </swiper-slide>
              <swiper-slide class="swiperslide" style="width:70%;">
                <img src="~@/assets/img/img_13_125.png" alt />
                <div class="swiperslide_text">智能扩容</div>
                <div  class="swiperslide_text_one">实时资源监控<br>
                     智能调配资源<br>
                     动态扩容</div>
              </swiper-slide>
            </swiper>
            
          </div>
        </div>
      </div>
      
      <div class="section section2">
        <div class="section-inner sectioninner">
          <div class="innerlistsr">
               <img  class="scrollRevealBounceIn_img" src="~@/assets/img/img_13_134.png" alt="" srcset="">
            <div class="scrollResda">
              <div class="section-body scrollRevealTop0 Toponetsds" style="padding-top: 0">
                <div class="Toponetsds_texttex">魔法云直播为您创造价值</div>
                <div class="Toponetsds_txt">
                  <div class="Toponetsds_txt_div">
                    <div>直播覆盖</div>
                    <div>50+行业</div>
                  </div>
                  <div class="Toponetsds_txt_div">
                    <div>累计服务</div>
                    <div>20W+企业</div>
                  </div>
                  <div class="Toponetsds_txt_div">
                    <div>直播次数</div>
                    <div>100w+次</div>
                  </div>
                  <div class="Toponetsds_txt_div">
                    <div>服务城市</div>
                    <div>200+</div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section section3">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">客户案例</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <swiper class="swiper" :options="swiperOption1">
              <swiper-slide>
                <div class="content">
                  <div>
                    <img src="~@/assets/img/img_1_8.png" alt />
                  </div>
                  <h1>《故宫知时节》读书分享会线上直播</h1>
                  <p>
                    故宫博物院副院长 任万平
                    <br />央视著名主持人 宋英杰 <br />现场解读故宫节气与物候之美
                  </p>
                  <span>
                    联合人民网、央视频、中央人民广播电台、
                    <br />微博、抖音、腾讯视频、优酷等同步直播
                  </span>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="content">
                  <div>
                    <img src="~@/assets/img/img_13_47.png" alt />
                  </div>
                  <h1>第四届未来网络发展大会</h1>
                  <p>
                    “云上+线下”模式，双向并举
                    <br />融合大会九大板块，集成十余论坛直播入口，一目了然
                  </p>
                  <span>
                    联合人民网、央视频、中央人民广播电台、
                    <br />微博、抖音、腾讯视频、优酷等同步直播
                  </span>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="content">
                  <div>
                    <img src="~@/assets/img/img_13_721.jpg" alt />
                  </div>
                  <h1>城轨好讲师大赛决赛直播</h1>
                  <p>
                    在弱网的城铁里如何给地铁定位
                    <br />成竹在胸，不负所托，经得起检验的线上大赛
                  </p>
                  <span>
                    联合人民网、央视频、中央人民广播电台、
                    <br />微博、抖音、腾讯视频、优酷等同步直播
                  </span>
                </div>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </div>
      </div>
      
      <tryOut></tryOut>
    </div>
    <Footer></Footer>
    <fixed-btn></fixed-btn>
  </div>
</template>

<script>
import Header from "@/components/header";
import Footer from "@/components/footer";
import FixedBtn from "@/components/FixedBtn";
import tryOut from "@/components/tryOut";
import common from "@/assets/js/common";
import config from "@/assets/js/config";
// import Swiper from 'swiper/swiper-bundle.min.js'
// import 'swiper/swiper-bundle.min.css'
//import $ from "jquery";

export default {
  mixins: [common],
  name: "Home",
  components: {
    Header,
    Footer,
    FixedBtn,
    tryOut,
  },
  data() {
    return {
      drop:true,
      sectionlist:1,
      sectionlistse:1,
      swiperOption: {
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 7000,
          disableOnInteraction: false,
          autoplayDisableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      swiperOption2: {
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 7000,
          disableOnInteraction: false,
          autoplayDisableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      swiperOption3:{
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 8000,
          disableOnInteraction: false,
          autoplayDisableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      swiperOption1: {
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 7000,
          disableOnInteraction: false,
          autoplayDisableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  methods: {
    
    down(){
var that=this;
      that.drop=!that.drop
    },
    listone(e){
      var that=this;
      that.sectionlist=e
    },
    listtwo(e){
        var that=this;
      that.sectionlistse=e
    }
  },
  mounted(){
      

      }
};
</script>

<style lang="scss" scoped>
.sectioninner{
      margin-bottom: 0 !important;
}
.stylestyl{
  background: #f6f9fa;
}
.stylestyl img{
  width: 100%;
}
::v-deep .stylestyl .swiper_div{
 background: #fff;
 padding-bottom: 10px;
 border-radius: 0px 0px 5px 5px;
     padding-top: 10px;
}
::v-deep .stylestyl  .swiper-slide{
    border-radius: 10px;
    overflow: hidden;
}
::v-deep.stylestyl .swiper-slide-active .swiper_div{
width: 100%;
}
::v-deep.stylestyl .swiper-slide-active{
      font-size: 0;
     
}
::v-deep.stylestyl .swiper-slide-next{
  margin: 5% 0;
       font-size: 0;
}
::v-deep.stylestyl .swiper-slide-next>img{
    width: 90%;
}
::v-deep.stylestyl .swiper-slide-prev{
  margin: 5% 0;
       font-size: 0;
}
::v-deep.stylestyl .swiper-slide-prev>img{
    width: 90%;
}
::v-deep.stylestyr .swiper-slide-active{
  height: 260px;
}
::v-deep.stylestyr .swiper-slide-prev{
margin-top: 15px;
}
::v-deep.stylestyr .swiper-slide-next{
margin-top: 15px;
}
.Toponetsds_txt{
      color: #fff;
     display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.Toponetsds_txt_div{
  width: 50%;
      text-align: center;
}
.Toponetsds_txt_div>div:nth-child(1){
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 30px;
margin-top: 25px;
}
.Toponetsds_txt_div>div:nth-child(2){

font-size: 30px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 42px;
}
.Toponetsds_texttex{
      font-size: 22px;
    font-weight: 500;
    color: #fff;
    line-height: 30px;
    text-align: center;
}
.swiperont{
  padding-bottom: 20px;
}
.swiperslide_text_one{
  
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #898989;
line-height: 25px;
}
.swiperslide_text{
    font-weight: 600;
    color: #424242;
    line-height: 42px;
    font-size: 20px;
}
.swiperslide img{
      margin-top: 30px;
}

.swiperslide{
  background: #fff;
  margin: 0 10px;
      padding: 10px;
      padding-bottom: 20px;
      height: 240px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      border-radius: 5px;
      
box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.16);
}
.swiperslide>div{
  width: 100%;
}
.Toponetsds_img_one{
      width: 90px;
}
.Toponetsds_img_ones{
  width: 42px;
}
.Toponetsds_img_onen{
  width: 62px;
}
.Toponetsds_img_oneo{
 width: 240px;
}
   
.Toponetsds_text {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    line-height: 30px;
}
.Toponetsds_texton {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.Toponetsds_img {
    margin-top: 10px;
    margin-bottom: 10px;
}
.Toponetsds_img img{
  margin-right: 10px;
}
.morderder {
    -webkit-box-shadow: 0 2px 4px 1px hsla(0,0%,76.1%,.5);
    box-shadow: 0 2px 4px 1px hsla(0,0%,76.1%,.5);
    border-radius: 25px;
    border: 1px solid #fff;
    padding: 0 16px;
    display: inline-table;
    color: #fff;
    line-height: 33px;
    font-size: 16px;
    margin-top: 10px;
}
.scrollResda{
    width: 80%;
    position: absolute;
    top: 10%;
    bottom: 0;
    left: 10%;
}
.innerlist{
    width: 90%;
    margin: 30px auto;
}
.innerlistsr{
  font-size: 0;
    margin: 0 auto;
    position: relative;
}
.scrollRevealBounceIn_img{
  width: 100%;
}
.innerlist_one{
    display: flex;
    justify-content: space-around;
}
.innerlist_text_set{
    text-align: center;
    margin: 20px 0;
}
.innerlist_text{
    font-size: 12px;
    color: #7C7C7C;
}
.innerlist_neso{
  font-weight: 500;
  line-height: 33px;
}
.innerlist_one>div{
  text-align: center;
}
.section-inner{
    margin-bottom:12px;
}
.section-body-text{
    font-size: 16px;
    color: #353535;
    font-weight: 500;
    line-height: 35px;
}
.section-body-div{
    font-size: 12px;
    color: #7C7C7C;
    width: 70%;
}
.inner_list_img{
    width: 15%;
    margin-top: 10px;
}
.inner_list_img img{
    width: 100%;
}
.inner_list{
    width: 94%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.inner_list_div{
  width: 50%;
  display: flex;
  justify-content:  space-around;
  padding: 10px 5px;
}
.nav_top{
    width: 90%;
    overflow: hidden;
    margin: auto;
}
.div_buttom{
    width: 80%;
    display: flex;
    justify-content: space-between;
}
.tope_list_Move{
  border-bottom: 2px #FE8401 solid;
}
.section_listsr{
  display: flex;
  justify-content: space-around;
  width: 90%;
  font-size: 15px;
  margin: 0 auto;
}
.section_list{
    display: -webkit-box;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow-x: auto;
}
.section_list::-webkit-scrollbar {display:none}
.section_list>div{
    margin: 0 6px; 
    text-align: center;
    padding-bottom: 5px;
}
.swiper_div{
  width: 90%;
  margin: 0 auto;
  text-align: left;
  padding: 0 5%;
}
.swiper_div_text{
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  color: #424242;
  line-height: 42px;
}
.swiper_div_txt{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #898989;
  line-height: 25px;
}
.section-list {
  .section {
    &.section2 {
      .section-body {
        overflow: hidden;
        ul {
          li {
            box-shadow: 0px 0px 6px 4px rgba(239, 239, 239, 0.5);
            border-radius: 4px;
            margin: 0 16px 16px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            &:nth-child(odd) {
              img {
                order: 2 !important;
                margin-left: 16px;
              }
              .text-wrap {
                order: 1 !important;
              }
            }
            &:nth-child(even) {
              img {
                margin-right: 16px;
              }
              .text-wrap {
                text-align: right;
              }
            }
            img {
              order: 1;
              width: 100px;
              flex-shrink: 0;
            }
            .text-wrap {
              order: 2;
              flex: 1;

              h1 {
                color: #4d4d4d;
                font-weight: 500;
                font-size: 16px;
                margin-bottom: 8px;
                line-height: 25px;
              }

              p {
                color: #4a4a4a;
                line-height: 25px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    &.section3 {
      .section-body {
        text-align: center;
        img {
          height: 400px;
          margin-bottom: 24px;
        }
        h1 {
          color: #353535;
          font-size: 16px;
          font-weight: 400;
          line-height: 26px;
          margin-bottom: 16px;
        }
        p {
          font-size: 14px;
          line-height: 24px;
          color: #5b5b5b;
          margin-bottom: 12px;
        }
        span {
          color: #aaaaaa;
          font-size: 12px;
          margin-bottom: 12px;
          line-height: 18px;
          display: block;
        }
        ::v-deep .swiper-pagination-bullet {
          width: 9px;
          height: 9px;
          background: #fccd9f;
          transition: all 400ms;
        }

        ::v-deep .swiper-pagination-bullet-active {
          width: 20px;
          height: 9px;
          border-radius: 20px;
          background: #ff850e;
        }

        ::v-deep .swiper-pagination {
          bottom: 180px;
        }
      }
    }
  }
}
</style>
